@extends('layouts.header')
@section('title','检测设备')
@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 设备管理 <span class="c-gray en">&gt;</span>检测设备<a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <div class="page-container">
        <div class="cl pd-5 bg-1 bk-gray">
                <a href="" class="btn btn-primary radius" onclick="Export()">当前页导出xls</a>
        </div>
        <form class="form form-horizontal" id="form" autocomplete="off">
            {{ csrf_form_field() }}
            <input type="hidden" name="id" value="">
            <div class="row cl">
                <label class="form-label col-sm-3">仪器设备名称：</label>
                <div class="formControls col-sm-4">
                    <input name="station_name" type="text" class="input-text required">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">参数：</label>
                <div class="formControls col-sm-4">
                    <input name="param" type="text" class="input-text required">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">参数名称：</label>
                <div class="formControls col-sm-4">
                    <input name="param_name" type="text" class="input-text required">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">参数类型：</label>
                <div class="formControls col-sm-4">
                    <input type='radio' name="type" value="0" id="radio-1"><label for="radio-1">铭牌属性</label>
                    <input type='radio' name="type" value="1" id="radio-2" checked><label for="radio-2">试验数据</label>
                </div>
            </div>
            @csrf
            <div class="row cl">
                <div class="col-sm-9 col-sm-offset-3">
                    <span class="btn btn-primary radius" onclick="submit()"> 添 加 </span>
                    <span class="btn btn-primary radius ml-15" onclick="submit(1)"> 修 改 </span>
                    <span class="btn btn-danger radius ml-15" onclick="layer_close();"> 取 消 </span>
                </div>
            </div>
        </form>
        <table class="table table-border table-bordered table-hover table-bg mt-15" id="datatable" style="white-space: nowrap;">
            <thead>
            <tr class="text-c">
                <th>ID</th>
                <th>仪器设备名称</th>
                <th>参数</th>
                <th>参数名称</th>
                <th>参数类型</th>
            </tr>
            </thead>
            <tbody id="tb-body">
                @foreach($data as $item)
                <tr class="text-c">
                    <td class="id">{{$item->id}}</td>
                    <td class="station_name">{{$item->station_name}}</td>
                    <td class="param">{{$item->param}}</td>
                    <td class="param_name">{{$item->param_name}}</td>
                    <td class="type">{{$item->type == 0 ? '铭牌属性' : '试验数据'}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{--    导出表格用--}}
    <script type="text/javascript" src="/admin/static/myfolder/js/jquerytable2excel.js"></script>

    <script type="text/javascript">
        var elems = ['id','station_name','param','param_name'];
        $(function() {
            $('#datatable').DataTable({});
        })
        $('tbody tr').on('click',function () {
            let trObj = $(this);
            $.each(elems,function(index,elem) {
                console.log(elem);
                console.log(trObj.find('.'+elem).text());
                $('input[name='+elem+']','#form').val(trObj.find('.'+elem).text());
            })
        })
        function Export() {
            $("#datatable").table2excel({            //exceltable为存放数据的table
                // 不被导出的表格行的CSS class类
                exclude: ".noExl",
                // 导出的Excel文档的名称
                name: "(云平台)设备管理台账",
                // Excel文件的名称
                filename: "(云平台)设备管理台账",
                bootstrap: true
            });
        }
        $('.sub').on('click',function(){

        })
        function submit(isEdit=0){
            if(isEdit == 0){
                $('input[name=id]','#form').val('');
            }
            if($('#form').valid()){
                ajax('post', '', $('#form').serialize(), subBak, 1);
                function subBak(res) {
                    res = parseInt(res);
                    if(res > 0){
                        let html = '<tr class="text-c" role="row">'+
                                        '<td class="id sorting_1">'+res+'</td>'+
                                        '<td class="station_name">'+$('input[name=station_name]').val()+'</td>'+
                                        '<td class="param">'+$('input[name=param]').val()+'</td>'+
                                        '<td class="param_name">'+$('input[name=param_name]').val()+'</td>'+
                                    '</tr>';
                        $('#tb-body').add(html);
                        $('input[name=id]').val('');
                    }
                }
            }
        }
    </script>

@endsection
